<template>
	<view>
		<view class="page-header">
			<view class="header-background"></view>
			<view class="head">
				<view class="head-state">
					{{status?status:""}}
				</view>
				<view class="head-description" v-if="detail.status==3">
					订单已生成，请于{{detail.order_time}}前到店付款{{type=="product"?"取货":"服务"}}，超过1天未到店将自动取消订单。
				</view>
				<view class="head-description" v-else-if="detail.status==2">
					您已{{type=="product"?"取货":"完成服务"}}，请对我们做出评价
				</view>
				<view class="action" v-if="detail.status==3">
					<view class="cancel-btn" @click="cancelOrder">
						取消订单
					</view>
				</view>
				<view class="action" v-else-if="detail.status==2">
					<view class="comment-btn" @click="commentOrder">
						立即评价
					</view>
				</view>
			</view>
		</view>
		
		<view class="shop">
			<image src="../../../static/location-green.png" mode="" class="location-icon"></image>
			<view class="shop-info">
				<view class="shop-name">
					{{detail.shop.name?detail.shop.name:""}}
				</view>
				<view class="shop-address">
					{{detail.shop.address?detail.shop.address:""}}
				</view>
			</view>
			<image src="../../../static/phonecall.png" mode="" class="phone-icon" @click="phoneCall"></image>
		</view>
		<view class="list">
			<view class="list-head">
				<view class="list-title">
					购物清单
				</view>
			</view>
			<view class="list-item" v-for="(item,key) in detail.products" :key="key">
				<image class="item-image" :src="item.thumb" mode="aspectFill"></image>
				<view class="item-info">
					<view class="item-title">
						<text>{{item.name}}</text>
						<text class="weight" v-if="type=='product'">
							{{item.weight}}g
						</text>
						<text class="weight" v-else>
							{{item.time}}min
						</text>
						<view style="flex: 1;"></view>
						<text v-if="type=='product'">*{{item.count}}</text>
					</view>
					
					<view class="item-bottom">
						<text class="item-price">
							￥{{item.price}}
						</text>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="total-item">
					<view class="total-title">
						付款方式
					</view>
					<view class="total-value">
						{{detail.pay_type==0?"划卡":"现金"}}
					</view>
				</view>
				<view class="total-item">
					<view class="total-title">
						商品总额
					</view>
					<view class="total-value">
						￥{{total}}
					</view>
				</view>
				
				<view class="total-item" v-for="(item,key) in detail.discount" :key="key">
					<view class="total-title">
						{{item.name}}
					</view>
					<view class="total-value">
						-￥{{item.amount}}
					</view>
				</view>
				
				<view class="total-item">
					<view class="total-value">
						订单总价：<text style="color: #FF7465;font-size: 36upx;">￥{{detail.total_price?detail.total_price:""}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="note">
			<view class="note-title">
				留言备注：
			</view>
			<view class="total-value">
				{{detail.note}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_id:8,
				type:"product",
				detail:{
					shop:{},
					products:[],
					discount:[],
				},
			};
		},
		onLoad:function(e){
			this.order_id=e.id;
			this.type=e.type;
			
		},
		onShow:function(){
			this.getOrderDetail();
		},
		computed:{
			status:function(){
				if(this.detail.status===0){
					return "已取消";
				}else{
					switch(this.detail.status){
						case 1:return "订单已完成";
						case 2:return "订单待评价";
						case 3:return this.type=="service"?"待服务":"待取货";
						case 4:return "已退货";
					}
				}
			},
			total:function(){
				var total=0;
				for(var i=0;i<this.detail.products.length;i++){
					var count = this.detail.products[i].count?this.detail.products[i].count:1;
					total+=this.detail.products[i].price*count;
				}
				return total;
			}
		},
		methods:{
			commentOrder:function(){
				var that=this;
				uni.navigateTo({
					url:"/pages/order/comment/comment?order_id="+that.order_id+"&type="+that.type,
				})
			},
			cancelOrder:function(){
				var that=this;
				uni.showModal({
					title:"取消订单",
					content:"确认取消订单？",
					success:function(e){
						if(e.confirm){
							uni.showLoading({
								title:"请稍后",
							})
							that.ajax("/order/cancel",{
								token:uni.getStorageSync("token"),
								id:that.order_id,
								type:that.type
							},function(res){
								uni.showToast({
									title: '取消成功',
									icon:"success"
								});
								setTimeout(function(){
									that.getOrderDetail();
								},1000)
							});
						}
					}
				})
			},
			getOrderDetail:function(){
				uni.showLoading({
					title:"加载中"
				});
				var that=this;
				that.ajax("/order/detail",{
					token:uni.getStorageSync("token"),
					id:this.order_id,
					type:this.type
				},function(res){
					that.detail=res.data.data;
				});
			},
			showGoodsDetail:function(id,store_id){
				uni.navigateTo({
					url:"/pages/"+this.type+"/detail/detail?type="+this.type+"&id="+id+"&shop_id="+store_id
				})
			},
			phoneCall:function(){
				uni.makePhoneCall({
					phoneNumber:this.detail.shop.phone,
				})
			}
		}
	}
</script>

<style>
	.total-price{
		color: #ff350f;
		font-weight: 600;
		
	}
	.submit-btn{
		background: #ffe55c;
		width: 300upx;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
		font-weight: 600;
		font-size: 32upx;
	}
	.liscens{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 30upx;
		justify-content:center;
	}
	.note{
		padding: 20upx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		margin-top: 30upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.note-title{
		font-size: 28upx;
		color: #4B4B4B;
		margin-right: 20upx;
	}
	.note-input{
		flex: 1;
		font-size: 22upx;
	}
	.total{
		margin-top: 30upx;
		background: #ffffff;
		padding: 0 20upx;
	}
	.discount{
		color: #b6b6b6;
		font-size: 20upx;
	}
	.total-item{
		display: flex;
		flex-direction: row;
		align-content: space-between;
		align-items: center;
		padding: 20upx 0;
	}
	.total-title{
		flex: 1;
		color: #4B4B4B;
		font-size: 28upx;
	}
	.total-value{
		flex: 1;
		color: #4B4B4B;
		text-align: right;
		font-size: 28upx;
	}
	.list{
		margin-top: 28upx;
		background: #ffffff;
		padding-bottom: 28upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.list-head{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 30upx 28upx;
	}
	.list-title{
		flex: 1;
		color: #4B4B4B;
		font-size: 28upx;
	}
	.list-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 28upx;
		position: relative;
		margin-bottom: 28upx;
	}
	.item-image{
		width: 202upx;
		height: 150upx;
		border-radius: 12upx;
	}
	.item-info{
		flex: 1;
		position: absolute;
		left: 118upx;
		top: 0;
		right: 28upx;
		padding:40upx 28upx 40upx 138upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:12upx;
		
	}
	.item-title{
		font-size: 25upx;
		display: flex;
		color: #4B4B4B;
		flex-direction: row;
	}
	.item-cart{
		flex: 1;
		display: flex;
		flex-direction: row;
		align-content: flex-end;
		align-items: flex-end;
	}
	.weight{
		font-size: 20upx;
		line-height: 34upx;
		background: #45AA8C;
		border-radius: 8upx;
		display: inline-block;
		padding: 0 10upx;
		color: #ffffff;
		margin-left: 10upx;
	}
	.item-bottom{
		margin-top: 50upx;
		display: flex;
		
		flex-direction: row;
		align-items: center;
	}
	.item-price{
		flex: 1;
		font-size: 24upx;
		color: #4B4B4B;
	}
	.item-count{
		flex: 1;
		text-align: right;
		font-size: 28upx;
		color: #4B4B4B;
	}
	.shop{
		margin-top: 28upx;
		background: #ffffff;
		padding: 28upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
	}
	.location-icon{
		width: 40upx;
		height: 44upx;
		margin-right: 20upx;
	}
	.phone-icon{
		width: 46upx;
		height: 46upx;
	}
	.shop-info{
		flex: 1;
	}
	.shop-name{
		font-size: 28upx;
		color: #4B4B4B;
	}
	.shop-address{
		font-size: 24upx;
		color: #8B8B8B;
	}
	.page-header{
		position: relative;
	}
	.header-background{
		background: #478E7E;
		height: 180upx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.head{
		position: relative;
		z-index: 10;
		margin: 0 16upx;
		background: #ffffff;
		padding: 40upx;
		box-shadow:0upx 2upx 20upx 0upx rgba(43,159,133,0.14);
		border-radius:24upx;
	}
	.head-state{
		color:#FF7465;
		font-size: 40upx;
		text-align: center;
	}
	.head-description{
		margin-top: 28upx;
		margin-bottom: 36upx;
		color: #4B4B4B;
		font-size: 24upx;
		text-align: center;
	}
	.action{
		border-top: 1upx solid #f0f0f0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #ffffff;
		padding-top: 36upx;
	}
	.cancel-btn{
		border:1upx solid #e2e2e2;
		border-radius: 15upx;
		color: #b5b5b5;
		font-size: 26upx;
		line-height: 85upx;
		width: 180upx;
		text-align: center;
	}
	.comment-btn{
		border-radius: 8upx;
		color: #ffffff;
		font-size: 28upx;
		line-height: 56upx;
		width: 150upx;
		text-align: center;
		background: #45AA8C;
	}
</style>
